@use 'sass:map';

// 引入文件
// {$button,$button-padding-horizontal,$button-border-width,$common-component-size,$button-font-size}
@use './common/var.scss' as *;
// {bem_b,bem_e,bem_m,when,$namespace,_VueAndNvueStyleAttr}
@use './mixin/mixins.scss' as *;
@use './mixin/function.scss' as *;
// {set-component-css-var,css-var-from-global}
@use './mixin/_var.scss' as *;
// {button-size}
@use 'mixin/button.scss' as *;

@import 'common/index.scss';

$e-button-loading-text-font-size: 15px !default;
$e-button-loading-text-margin-left: 4px !default;
$e-button-large-width: 100% !default;
$e-button-small-min-width: 60px !default;
$e-button-mini-min-width: 50px !default;
$e-button-plain-background-color: #fff !default;
$e-button-icon-min-width: 1em !default;

@include bem_b(button) {
	height: map.get($common-component-size, 'normal');
	position: relative;
	align-items: center;
	justify-content: center;
	@include flex;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
	flex-direction: row;
	@include VueAndNvueStyleAttr('color','button', 'default-text-color');
	// background-color','button', 'background-color');
	@include VueAndNvueStyleAttr('border-color','button', 'border-color');
	@include VueAndNvueStyleAttr('border-width','button', 'border-width');
	@include VueAndNvueStyleAttr('border-style','button', 'border-style');

	@include button-size(map.get($button-padding-horizontal, 'normal'), map.get($button-font-size, 'normal'));

	@include bem_e(text) {
		font-size: map.get($button-font-size, 'normal');
	}

	@include bem_e(loading) {
		&-text {
			font-size: $e-button-loading-text-font-size;
			margin-left: $e-button-loading-text-margin-left;
		}
	}

	@include bem_e(icon) {
		/* #ifndef APP-NVUE */
		min-width: $e-button-icon-min-width;
		line-height: inherit !important;
		vertical-align: top;
		/* #endif */
	}

	@include bem_m(large) {
		/* #ifndef APP-NVUE */
		width: $e-button-large-width;
		/* #endif */
	}

	@include bem_m(small) {
		/* #ifndef APP-NVUE */
		min-width: $e-button-small-min-width;
		/* #endif */
	}

	@include bem_m(mini) {
		/* #ifndef APP-NVUE */
		min-width: $e-button-mini-min-width;
		/* #endif */
	}

	@include bem_m(circle) {
		@include VueAndNvueStyleAttr('border-top-right-radius', 'button', 'radius-circle');
		@include VueAndNvueStyleAttr('border-top-left-radius', 'button', 'radius-circle');
		@include VueAndNvueStyleAttr('border-bottom-left-radius', 'button', 'radius-circle');
		@include VueAndNvueStyleAttr('border-bottom-right-radius', 'button', 'radius-circle');
	}

	@include bem_m(square) {
		@include VueAndNvueStyleAttr('border-top-right-radius', 'button', 'radius-square');
		@include VueAndNvueStyleAttr('border-top-left-radius', 'button', 'radius-square');
		@include VueAndNvueStyleAttr('border-bottom-left-radius', 'button', 'radius-square');
		@include VueAndNvueStyleAttr('border-bottom-right-radius', 'button', 'radius-square');
	}

	@include bem_m(plain) {
		background-color: $e-button-plain-background-color;
	}

	@include bem_m(hairline) {
		border-width: 0.5px !important;
	}

	// 批量设置按钮的css变量
	@each $type in (primary, success, warning, error, info) {
		@include bem_m($type) {
			// @include button-variant($type);

			@if $type==info {
				color: #323233;
				background-color: #fff;
				border-color: #ebedf0;
			} @else {
				@include VueAndNvueStyleAttr('background-color', 'color', $type);
				@include VueAndNvueStyleAttr('border-color', 'color', $type);
				color: #fff;
			}
			@include multiple((bem('button', '', 'plain'))) {
				@include VueAndNvueStyleAttr('color','color', $type);
				background-color: #fff;
			}
		}
	}
	// 设置按钮size为large与small时的样式
	@each $size in ('large', 'small', 'mini') {
		@include bem_m($size) {
			height: map.get($button-height, $size);
			@include button-size(map.get($button-padding-horizontal, $size), map.get($button-font-size, $size));

			@include bem_e(text) {
				font-size: map.get($button-font-size, $size);
			}
		}
	}

	// 禁用按钮样式
	@include when(disabled) {
		@include VueAndNvueStyleAttr('opacity','button', 'disabled-opacity');
	}
	// 禁用按钮样式
	@include when(text) {
		/* #ifndef APP-NVUE */
		height: auto;
		border: none;
		/* #endif */

		padding: 0;
		background-color: transparent;
		@include VueAndNvueStyleAttr('color','button', 'background-color');
	}
}
